<template>
	<wsPage :title="$t('finance.MerchantFundsFlow')">
		<div slot="page_operate">
			<Button type="ghost" @click="refresh"><Icon type="refresh"></Icon><span>{{$t('Permission.refresh')}}</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem :label="$t('finance.IncomeExpenditureType')">
							<Select clearable v-model="queryForm.type" :placeholder="$t('finance.pleaseChoose')" class="ws-form-select">
									<Option value="1">{{$t('finance.income')}}</Option>
									<Option value="2">{{$t('finance.expenditure')}}</Option>
							</Select>
					</FormItem>
					<FormItem :label="$t('finance.FlowType')">
							<Select clearable v-model="queryForm.flowType" :placeholder="$t('finance.pleaseChoose')" class="ws-form-select">
									<Option value="1">{{$t('finance.Receipt')}}</Option>
									<Option value="2">{{$t('finance.Transaction')}}</Option>
									<Option value="3">{{$t('finance.Expenditure')}}</Option>
									<Option value="4">{{$t('finance.ServiceFees')}}</Option>
									<Option value="5">{{$t('finance.Refund')}}</Option>
							</Select>
					</FormItem>
					<FormItem :label="$t('finance.TimeInterval')">
						<Row>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" :placeholder="$t('finance.QueryStartTime')" v-model="queryForm.searchStartTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			                <Col span="2" style="text-align: center">-</Col>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" :placeholder="$t('finance.QueryEndTime')" v-model="queryForm.searchEndTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			            </Row>      
			        </FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

	</wsPage>
</template>

<script>
	export default {
		data() {
			return {
				queryForm: {
					type: '',
					flowType: '',
					searchStartTime: '',
					searchEndTime: ''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '流水号',
						key: 'sn',
						width: 340,
						align: 'center'
					},
					{
						title: '收支类型',
						key: 'type',
						width: 175,
						align: 'center',
						render: (h, params) => {
							return h('span',{

							},params.row.type == 1?"收入":"支出")
						}
					},
					{
						title: '流水类型',
						key: 'flowType',
						width: 175,
						align: 'center',
						render: (h, params) => {
							return h('span',{

							},this.checkFlowType(params.row.flowType))
						}
					},
					{
					 	title: '流水金额',
					 	key: 'flowAmount',
					 	//width: 200,
					 	align: 'center'
					 },
					{
						title: '订单编号',
						key: 'orderSn',
						//width: 200,
						align: 'center'
					},
					 {
					 	title: '手续费',
					 	key: 'handlingCharge',
					 	//width: 200,
					 	align: 'center'
					 },
					 {
					 	title: '服务费',
					 	key: 'serviceCharge',
					 	//width: 200,
					 	align: 'center'
					 },
					  
					{
						title: '余额',
						key: 'balance',
						// width: 100,
						align: 'center'
					},
					{
						title: '创建日期',
						key: 'createDate',
						// width: 100,
						align: 'center'
					}],

					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				}
			}
		},

		computed: {

		},
		mounted() {
			this.init();
			// 当前选择的语言版本
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
			console.log(getCurrentLanguage);
			// console.log(this.$i18n.messages);
			this.$i18n.locale=getCurrentLanguage;
			if(this.$i18n.locale=='en'){
				this.table.columns=[
					{
						title: 'Running water number',
						key: 'sn',
						//width: 320,
						align: 'center'
					},
					{
						title: 'Income and expenditure type',
						key: 'type',
						//width: 250,
						align: 'center',
						render: (h, params) => {
							return h('span',{

							},params.row.type == 1?"income":"expenditure")
						}
					},
					{
						title: 'Flow type',
						key: 'flowType',
						//width: 215,
						align: 'center',
						render: (h, params) => {
							return h('span',{

							},this.checkFlowType(params.row.flowType))
						}
					},
					{
					 	title: 'Running water amount',
					 	key: 'flowAmount',
					 	//width: 200,
					 	align: 'center'
					 },
					 {
					 	title: 'Handling fee',
					 	key: 'handlingCharge',
					 	//width: 200,
					 	align: 'center'
					 },
					{
						title: 'Service fee',
						key: 'serviceCharge',
					 	//width: 200,
					 	align: 'center'
					 },
					{
						title: 'Balance',
						key: 'balance',
						//width: 450,
						align: 'center'
					},
					{
						title: 'Creation date',
						key: 'createDate',
						//width: 450,
						align: 'center'
					}
				]
			}else if(this.$i18n.locale=='it'){
				this.table.columns=[
					{
                        type: 'selection',
                        //width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: 'Numero di acqua corrente',
						key: 'sn',
						//width: 400,
						align: 'center'
					},
					{
						title: 'Entrate e tipo di spesa',
						key: 'type',
						//width: 180,
						align: 'center',
						render: (h, params) => {
							return h('span',{

							},params.row.type == 1?"reddito":"spesa")
						}
					},
					{
						title: 'Tipo di flusso',
						key: 'flowType',
						//width: 180,
						align: 'center',
						render: (h, params) => {
							return h('span',{

							},this.checkFlowType(params.row.flowType))
						}
					},
					{
					 	title: 'Quantità di acqua corrente',
					 	key: 'flowAmount',
						//width: 200,
						align: 'center'
					 },
					 {
					 	title: 'Tassa di gestione',
					 	key: 'handlingCharge',
					 	//width: 200,
					 	align: 'center'
					 },
					 {
					 	title: 'Servizio a pagamento',
					 	key: 'serviceCharge',
						//width: 200,
						align: 'center'
					 },
					{
						title: 'Saldo disponibile ',
						key: 'balance',
						//width: 465,
						align: 'center'
					},
					{
						title: 'Data di creazione',
						key: 'createDate',
						//width: 400,
						align: 'center'
					}
				]
			}

		},
		methods: {
			/**
			 * 判断流水类型
			 */
			checkFlowType(flowType){
				if(this.$i18n.locale=='en'){
					if(flowType == 1) return 'Order receipt';
					if(flowType == 2) return 'Transaction service fee';
					if(flowType == 3) return 'Withdrawal expenditure';
					if(flowType == 4) return 'Withdrawal of service fees';
					if(flowType == 5) return 'Refund payment';
				}else if(this.$i18n.locale=='zh'){
					if(flowType == 1) return '订单收款';
					if(flowType == 2) return '交易服务费';
					if(flowType == 3) return '提现支出';
					if(flowType == 4) return '提现服务费支出';
					if(flowType == 5) return '退款支出';
				}else if(this.$i18n.locale=='it'){
					if(flowType == 1) return "Ricevuta dell'ordine";
					if(flowType == 2) return 'Commissione per il servizio di transazione';
					if(flowType == 3) return 'Spese di ritiro';
					if(flowType == 4) return 'Ritiro delle tasse di servizio';
					if(flowType == 5) return 'Rimborso';
				}
				
			},

			//查询开始时间段必填
			dateConfirm(){
				let searchStartTime = this.queryForm.searchStartTime;
				let searchEndTime = this.queryForm.searchEndTime;
				if (searchStartTime != null ||searchStartTime != '') {
					searchEndTime = new Date();
				} else if (searchEndTime != null || searchEndTime !='') {
					searchStartTime = searchEndTime;
				}
			},

			init() {
				this.query();
			},
			//刷新
			refresh(){
				this.queryForm.type = '';
				this.queryForm.flowType = '';
				this.queryForm.searchStartTime = '';
				this.queryForm.searchEndTime = '';
				this.table.page.pageNum = 1;
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ms/merchantAccountRecords?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>
